<template>
  <div class="security-container">
    <h3>安全设置</h3>
    <div class="security-content">
      <div class="security-item">
        <h4>修改密码</h4>
        <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input type="password" v-model="passwordForm.oldPassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="passwordForm.newPassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="passwordForm.confirmPassword" show-password></el-input>
          </el-form-item>
          <el-button type="primary" @click="submitPassword">确认修改</el-button>
        </el-form>
      </div>
      
      <div class="security-item">
        <h4>绑定手机</h4>
        <el-form :model="phoneForm" :rules="phoneRules" ref="phoneForm">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="phoneForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="phoneForm.code" style="width: 200px"></el-input>
            <el-button type="primary" :disabled="isSending" @click="sendCode">
              {{ isSending ? `${countdown}秒后重试` : '获取验证码' }}
            </el-button>
          </el-form-item>
          <el-button type="primary" @click="submitPhone">确认绑定</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 密码表单
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value.length < 6) {
    callback(new Error('密码长度不能小于6位'))
  } else {
    if (passwordForm.value.confirmPassword !== '') {
      document.getElementById('passwordForm').validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== passwordForm.value.newPassword) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const passwordRules = {
  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  newPassword: [{ required: true, validator: validatePass, trigger: 'blur' }],
  confirmPassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
}

// 手机表单
const phoneForm = ref({
  phone: '',
  code: ''
})

const phoneRules = {
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}

// 验证码相关
const isSending = ref(false)
const countdown = ref(60)

const sendCode = () => {
  if (!phoneForm.value.phone) {
    ElMessage.warning('请输入手机号码')
    return
  }
  
  isSending.value = true
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      isSending.value = false
      countdown.value = 60
    }
  }, 1000)
  
  ElMessage.success('验证码已发送')
}

// 提交方法
const submitPassword = () => {
  ElMessage.success('密码修改成功')
}

const submitPhone = () => {
  ElMessage.success('手机绑定成功')
}
</script>

<style scoped lang="scss">
.security-container {
  padding: 20px;
  background: #fff;
  min-height: 500px;
  
  h3 {
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .security-content {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .security-item {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    
    h4 {
      font-size: 18px;
      margin-bottom: 20px;
    }
  }
}
</style>